<template>
<a-layout-sider v-model:collapbnsed="collapsed" collapsible>
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>维修模块</span>
            </span>
          </template>
          <a-menu-item key="/user">
            <router-link :to="{ path: '/user',query:{firstPath:'维修模块', secondPath: '用户管理'} }">用户管理</router-link>
            </a-menu-item>
          <a-menu-item key="/maintain">
            <router-link :to="{path: '/maintain', query:{firstPath:'维修模块', secondPath: '维修管理'} }">维修管理</router-link>
          </a-menu-item>
          <a-menu-item key="/appointment">
            <router-link :to="{path: '/appointment', query:{firstPath:'维修模块', secondPath: '预约管理'} }">预约管理</router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>布局模块</span>
            </span>
          </template>
          <a-menu-item key="/flex">
            <router-link :to="{path: '/flex', query:{firstPath:'布局模块', secondPath: '盒子布局'} }">盒子布局</router-link>
          </a-menu-item>
          <a-menu-item key="/grid">
            <router-link :to="{path: '/grid', query:{firstPath:'布局模块', secondPath: '网格布局'} }" >网格布局</router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
</template>

<script setup>
import { ref } from 'vue'
import { UserOutlined, TeamOutlined } from '@ant-design/icons-vue'
const collapsed = ref(false)
const selectedKeys = ref(['1'])
const onCollapse = (collapsed) => {
  console.log(collapsed)
}
const onSelect = (e) => {
  console.log('click', e)
}
</script>

<style lang="scss" scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>